{% extends "overview/base.html" %}

{% block external %}
  {% load static %}
  <link rel="stylesheet" type="text/css" href="{% static 'css/users/register.css' %}"/>
{% endblock %}

{% block title %}
  注册
{% endblock %}

{% block main %}
  <div id="register" class="container">
    <div class="row">
      <div class="col-sm-4 col-sm-offset-4">
        <form class="register-box" role="form" action="{% url 'users:register' %}" method="post">
          <!--放恶意攻击-->
          {% csrf_token %}
          <!--开头的注册-->
          <div class="text-center">
            <h3>~注册~</h3>
          </div>
          <hr/>
          <!--用户名-->
          <!--用户名部分出问题则显示错误信息-->
          {% if username_error %}
            <div class="input-group has-error">
              <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
              <input type="text" name="username" class="form-control" placeholder="用户名" value="{{ username }}"/>
            </div>
            <p class="text-danger small">*{{ username_error }}</p>
          {% else %}
            <div class="input-group">
              <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
              <input type="text" name="username" class="form-control" placeholder="用户名" value="{{ username }}"/>
            </div>
            <p class="text-warning small">*用户名只能包含字母、数字，下划线，且在2-20个字符以内</p>
          {% endif %}
          <br/>
          <!--密码-->
          <!--密码部分出现错误显示错误信息-->
          {% if password_error %}
            <div class="input-group has-error">
              <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
              <input type="password" name="password" class="form-control" placeholder="密码" value="{{ password }}"/>
            </div>
            <p class="text-danger small">*{{ password_error }}</p>
          {% else %}
            <div class="input-group">
              <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
              <input type="password" name="password" class="form-control" placeholder="密码" value="{{ password }}"/>
            </div>
            <p class="text-warning small">*密码需在8-30个字符以内</p>
          {% endif %}
          <br/>
          <!--确认密码-->
          {% if password_error %}
            <div class="input-group has-error">
              <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
              <input type="password" name="password_confirm" class="form-control" placeholder="确认密码" value="{{ password_confirm }}"/>
            </div>
          {% else %}
            <div class="input-group">
              <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
              <input type="password" name="password_confirm" class="form-control" placeholder="确认密码" value="{{ password_confirm }}"/>
            </div>
          {% endif %}

          <hr/>
          <!--用户协议-->
          <div class="text-center">
            <p>*注册即代表同意<a href="{% url 'users:protocal' %}" target="_blank">《用户协议》</a>*</p>
          </div>
          <br/>
          <!--注册按钮-->
          <button type="submit" class="btn btn-primary btn-block">注册</button>
        </form>
      </div>
    </div>
  </div>
{% endblock %}

<!--取消页脚-->
{% block footer %}
  <hr/>
  <p class="text-center">@</p>
{% endblock %}